<template lang="html">
  <div class='balance'>
    <div class='balance_nav'>
      <div class='nav'>
        <!--        <div class='line_left line'></div>-->
        <div class="cneter">
          <el-steps :active="act" align-center>
            <el-step title="确认订单信息"></el-step>
            <el-step title="在线付款"></el-step>
            <el-step title="物流发货"></el-step>
            <el-step title="确认收货"></el-step>
          </el-steps>
        </div>
        <!--        <div :class="['line',changRight==1 ? 'chang_line' : 'line_right']"></div>-->
      </div>
    </div>
    <div class='balance_main' v-loading="loadingt">
      <div class='addre_name'>选择收货地址</div>
      <div class='balance_search'>
        <el-input placeholder="请输入内容" v-model="search" prefix-icon="el-icon-search">
          <el-button slot="append" @click="getaddRess">搜索</el-button>
        </el-input>
      </div>
      <div class='shipping_address'>
        <div :class="['radios',radio == item.address_id ? 'ra_bg':'']" @click="changRadio(item.address_id)"
             v-for="item in addRess" :key="item.address_id"
             :title="item.region.province + item.region.city + item.region.region + item.detail">
          <el-radio v-model="radio" :label="item.address_id"><span></span></el-radio>
          <div class="addre">{{item.detail}}</div>
          <div class='cnm'>
            {{item.name}}
            <span class="phone">
                {{item.phone}}
              </span>
            <span class="phone">
                {{item.id_card_number}}
              </span>
          </div>
          <div class='cnm hm'>
            <span class='mrAddres' @click="setAddress(item.address_id)" v-if="item.is_status!=1">设为默认地址</span>
            <span class='upAddres' @click="modifyAddress(item.address_id)">修改</span>
          </div>
          <div :class="[item.is_status == 1 ? 'ra_img':'']"></div>
        </div>
      </div>
      <div v-if="addRess.length <=0 ">
        请添加收货地址
      </div>
      <div class='adAddres' @click="dialogVisible = true">添加新地址</div>

      <div class='addre_name'>确认商品信息</div>
      <div class="info_ts">
        <span>温馨提示：</span>
        跨境商品（直邮，保税）不支持无理由退换货
      </div>
      <div class='info_sp' v-for="(item,index) in tableData">
        <div class='info_top'>
          <div class='info_top_one '></div>
          <div class='info_top_two'>商品</div>
          <div class='info_top_three' v-for="sku in item.goods_sku.goods_attr_info" :key="sku.spec_name"
               :style="{width: item.goods_sku.threeWidth+ 'px' }">
            {{sku.spec_name}}
          </div>
          <div class='info_top_five'>购买数量</div>
          <div class='info_top_six'>小计</div>
        </div>
        <div class='info_centent'>
          <div class='info_top_one'>
            <img :src="$getImg(item.images)" alt="">
          </div>
          <div class='info_top_two'>
            <p>{{item.goods_name}}</p>

            <p>贸易方式: {{item.trade_type_name}}</p>
          </div>
          <div class='info_top_three' v-for="sku in item.goods_sku.goods_attr_info" :key="sku.spec_value"
               :style="{width: item.goods_sku.threeWidth+ 'px' }">
            <p>{{sku.spec_value}}</p>
          </div>
          <div class='info_top_five'>{{item.total_num}}</div>
          <div class='info_top_six'>￥{{item.goods_total_price}}</div>
        </div>
        <div class='info_bottom'>
          <div>
            <span>留言：</span>
            <input class="liuyan" v-model="remark[index]" placeholder="选填，购买需补充说明"/>
          </div>
          <div class='bottom_rig'>
            <div class='bottom_ri'>
              <div class='bottom_title'>商品金额：</div>
              <div class='bottom_price'>￥{{item.goods_total_price}}</div>
            </div>
            <div class='bottom_ri'>
              <div class='bottom_title'>运费：</div>
              <div class='bottom_price'>￥{{item.express_price}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class='hh'>
        <div class='hh_right'>
          <div class='hh_top'>
            <div class='hh_title'>实付金额：</div>
            <div class='hh_price'>￥{{actually}}</div>
          </div>
          <div class="hh_buttom" @click="submitOrder">提交订单</div>
        </div>
      </div>
    </div>
    <el-dialog title="新增收货地址" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="收货人" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入收货人"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" maxlength="11" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="id_card_number">
            <el-input v-model="ruleForm.id_card_number" placeholder="请输入身份证号码"></el-input>
          </el-form-item>
          <el-form-item label="" class="idCard">
            <el-row>
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  :action="imgUrl+'/index.php?s=/admin/upload/image'"
                  :headers="headers"
                  :show-file-list="false"
                  :auto-upload="true"
                  name="iFile"
                  :on-success="positiveAvatarSuccess"
                  :on-error="err"
                >
                  <img v-if="positiveImg" :src="positiveImg" class="avatar">
                  <img v-else src="../../assets//img/zhengmian.png" class="avatar">

                </el-upload>
              </el-col>
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  :action="imgUrl+'/index.php?s=/admin/upload/image'"
                  :headers="headers"
                  :show-file-list="false"
                  :auto-upload="true"
                  name="iFile"
                  accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
                  :on-success="backAvatarSuccess"
                >
                  <img v-if="backImg" :src="backImg" class="avatar">
                  <img v-else src="../../assets//img/fanmian.png" class="avatar">
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <!--          <el-form-item label="收货地址" prop="region">-->
          <!--            <el-cascader v-model="ruleForm.region" :options="options"-->
          <!--                         :props="{label : 'region_name',value : 'region_name'}"></el-cascader>-->
          <!--          </el-form-item>-->

          <el-form-item label="收货地址">
            <el-col :span="24">
              <el-select v-model="cityOne" placeholder="请选择省" @change="oneCity" class="addre">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.region_name"
                  :value="index">
                </el-option>
              </el-select>
              <el-select v-model="cityTwo" placeholder="请选择市" @change="twoCity" class="addre">
                <el-option
                  v-for="(item,index) in twoArr"
                  :key="index"
                  :label="item.region_name"
                  :value="index">
                </el-option>
              </el-select>
              <el-select v-model="cityThree" placeholder="请选择区/县" class="addre">
                <el-option
                  v-for="(item,index) in threeArr"
                  :key="index"
                  :label="item.region_name"
                  :value="index">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="详细地址" prop="detail">
            <el-input v-model="ruleForm.detail" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="ruleForm.status">设为默认地址</el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
    </el-dialog>

    <el-dialog
      title=""
      :close-on-click-modal=false
      :close-on-press-escape=false
      :show-close=false
      :visible.sync="centerDialogVisible"
      width="30%"
      top="35vh"
      center>
      <div class="pay" v-show="isShow=='3'">
        <div @click="payT=0">
          <img src="../../assets/img/wxzf.png"/>
          <span :class="[payT== 0 ? 'wxzf' : '']">微信支付</span>
        </div>
        <div class="feng" v-if="commodityType"></div>
        <div @click="yePlay" v-if="commodityType">
          <img src="../../assets/img/yezf.png"/>
          <span :class="[payT== 1 ? 'yezf' : '']">余额支付</span>
        </div>
      </div>
      <div style="height: 250px">
        <div v-show="isShow=='1'">
          <div class="loadingBox" v-loading="loading"
               element-loading-text="订单已提交，正在校验中，请等待......" element-loading-spinner="el-icon-loading">
          </div>
          <p class="tswz">预计等待5-10s</p>
        </div>

        <div class="errone" v-show="isShow=='2'">
          <p>{{infomation}}</p>
        </div>

        <div class="nowPlay" v-show="isShow=='3'">
          <div class="clonse" @click="clea"></div>
          <template v-if="payT==1 && commodityType">
            <strong style="margin-bottom: 20px">订单金额：<span class="ddje">￥{{actually}}</span></strong>
            <div>
              当前账户余额(元)：￥{{ shopInformation && shopInformation.balance}}
            </div>
            <div v-if="parseFloat(actually) > parseFloat(shopInformation.balance)">
              余额不足，请充值
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="nowPlay(10)"
                       v-if="parseFloat(actually) <= parseFloat(shopInformation.balance)">立即支付
            </el-button>
          </template>
          <template v-if="payT==0 && payUrl">
            <div class="qrCode">
              <img :src="payUrl" alt=""/>
            </div>
            <div class="plasePay">请扫码支付：<span>￥</span><span>{{actually}}</span></div>
            <!--            <el-button type="success" v-if="isplay" @click="clea">确认支付</el-button>-->
            <!--            <el-button type="success" v-else disabled >确认支付</el-button>-->
          </template>
          <template v-if="isplay">
            <div class="zfcg">支付成功</div>
            <div>{{djs}}s</div>
            <div class="qsd">请稍等，正在跳转中.......</div>
          </template>

        </div>


      </div>

    </el-dialog>
  </div>
</template>

<script>
    import config from '../../config'

    var payInterval = null;
    var timeo = null;
    var djsinter = null;
    export default {
        name: "balance",
        data: function () {
            // 手机号验证
            const validatePhone = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else {
                    if (!/^1[3456789]\d{9}$/.test(value)) {
                        callback(new Error("请输入正确的手机号"));
                    } else {
                        callback();
                    }
                }
            }
            return {
                loadingt: true,
                djs: 3,
                payT: 0,
                imgUrl: config.imgUrl,
                headers: {
                    token: ''
                },
                cityOne: '',
                cityTwo: '',
                cityThree: '',
                twoArr: [],
                threeArr: [],
                cityIndex: null,
                ctiyChildrenIndex: null,

                positiveImg: '',//正面
                backImg: '',//反面
                loading: true,
                act: 1,
                changRight: 0,
                search: "",
                radio: "",
                dialogVisible: false,
                options: [],
                addRess: [],
                ruleForm: {
                    name: "",
                    phone: "",
                    id_card_number: "",
                    region: [],
                    detail: "",
                    status: false,
                    id_card_just: '',
                    id_card_back: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入收货人姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    id_card_number: [
                        {required: true, message: '请输入身份证号码', trigger: 'blur'}
                    ],
                    detail: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'}
                    ],
                    region: [
                        {required: true, message: '请选择收货城市', trigger: 'change'}
                    ]
                },
                id: "",
                tableData: [],
                actually: 0,
                remark: [],
                type: 1,
                goods_id: "",
                goods_num: "",
                goods_sku_id: "",
                cart_ids: [],
                centerDialogVisible: false,
                isShow: '1',//1:正在校验 2：身份信息不符 3：商品全部校验成功,
                infomation: '',
                shopInformation: {},
                orderID: 0,
                payUrl: '',
                isplay: false,
                commodityType: true,
                threeWidth: 150
            }
        },
        created() {
            this.goods_id = this.$route.query.goods_id;
            this.goods_num = this.$route.query.goods_num;
            this.goods_sku_id = this.$route.query.goods_sku_id;
            if (this.$route.query.cart_ids) {
                this.type = 2;
                this.cart_ids = this.$route.query.cart_ids.substring(0, this.$route.query.cart_ids.length - 1);
            } else {
                this.type = 1;
            }

            this.getToken();
            this.getUserInfo();
            // this.getList();
            this.getaddRess();
            this.getAddressList();
        },
        watch: {

            cityIndex() {
                this.twoArr = this.options[this.cityIndex].children;
                this.threeArr = this.options[this.cityIndex].children[this.ctiyChildrenIndex].children;
            },
            ctiyChildrenIndex() {
                this.threeArr = this.options[this.cityIndex].children[this.ctiyChildrenIndex].children;
            },

        },
        destroyed() {
            clearInterval(payInterval);
            clearInterval(djsinter);
            // clearTimeout(timeo);
        },
        mounted() {

        },

        methods: {

            yePlay() {
                this.payT = 1;
                // clearInterval(payInterval);
                // clearInterval(djsinter);
                // clearTimeout(timeo);
            },
            clea() {
                this.centerDialogVisible = false;
                clearInterval(payInterval);
                clearInterval(djsinter);
                // clearTimeout(timeo);
                this.$router.push({path: "/index/order/allOrder"})

            },
            oneCity(index) {
                this.cityIndex = index;
                this.ctiyChildrenIndex = 0;
                this.cityTwo = 0;
                this.cityThree = 0;
            },
            twoCity(index) {
                this.ctiyChildrenIndex = index;
                this.cityThree = 0;
            },
            getToken() {
                this.headers.token = window.localStorage.getItem("token");

            },
            positiveAvatarSuccess(res, file) {
                console.log(res)
                if (res.code == 1) {
                    this.$notifyError(res.msg);
                    return false
                }
                this.positiveImg = res.data.file_path;
                this.ruleForm.id_card_just = res.data.file_path;
            },
            backAvatarSuccess(res, file) {
                console.log(res)
                if (res.code == 1) {
                    this.$notifyError(res.msg);
                    return false
                }
                this.backImg = res.data.file_path;
                this.ruleForm.id_card_back = res.data.file_path;
            },
            err(data) {
                // debugger
            },
            nowPlay(payType = 10) {

                this.$HttpPost("/index.php?s=/admin/home.order/pay", {
                    order_id: this.orderID,
                    payType: payType
                }).then(res => {
                    if (res.code != 0) {
                        this.$notifyError('请求错误');
                        setTimeout(() => {
                            window.history.back();
                        }, 1500)
                        return false
                    }

                    if (res.code == 0 && payType == 10) {
                        this.centerDialogVisible = false;
                        this.$notifySuccess(res.msg.success);
                        this.$router.push({path: `/index/order/allOrder`});
                    }
                    if (res.code == 0 && payType == 20) {
                        this.payUrl = res.data.payment;
                        payInterval = setInterval(() => {
                            this.$HttpGet("/index.php?s=/admin/home.order/pay_wechat_status", {
                                order_id: this.orderID,
                            }).then(res => {
                                if (res.data != '未完成支付') {

                                    this.isplay = true;

                                    this.payT = '支付成功';
                                    this.isShow = '3';

                                    djsinter = setInterval(() => {
                                        if (this.djs < 1) {
                                            clearInterval(djsinter);
                                            return false;
                                        }
                                        if (this.djs == 1) {
                                            this.isplay = true;
                                            // this.$notifySuccess('支付成功');
                                            this.$router.push({path: `/index/order/allOrder`});
                                            console.log(1111)
                                        }
                                        this.djs -= 1;

                                    }, 1000)

                                }
                            })
                        }, 1000)
                    }

                })
            },
            getUserInfo() {
                this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                    if (res.code == 0) {
                        this.shopInformation = res.data
                    }

                })
            },
            changRadio(number) {
                this.radio = number;
                this.getList();
            },
            handleClose() {
                this.ruleForm = {
                    name: "",
                    phone: "",
                    id_card_number: "",
                    region: [],
                    detail: "",
                    status: false
                }
                this.$refs['ruleForm'].resetFields();
            },
            confirm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let url = "";
                        if (this.id) {
                            url = `/index.php?s=/admin/home.address/edit&address_id=${this.id}`
                        } else {
                            url = "/index.php?s=/admin/home.address/add";
                        }
                        this.ruleForm.region = [
                            this.options[this.cityOne].region_name,
                            this.options[this.cityOne].children[this.cityTwo].region_name,
                            this.options[this.cityOne].children[this.cityTwo].children[this.cityThree].region_name,
                        ];
                        this.$HttpPost(url, this.ruleForm).then(res => {
                            this.$notifySuccess(res.msg);
                            this.getaddRess();
                            this.dialogVisible = false;
                        })
                    }
                });
            },
            getList() {
                let url = "";
                let param = {};
                if (this.type == 1) {
                    url = "/index.php?s=/admin/home.order/buyNow";
                    param = {
                        goods_id: this.goods_id,
                        goods_num: this.goods_num,
                        goods_sku_id: this.goods_sku_id,
                        address_id: this.radio
                    };
                } else {
                    url = "/index.php?s=/admin/home.order/cart";
                    param = {
                        cart_ids: this.cart_ids,
                        address_id: this.radio
                    };
                }
                this.$HttpGet(url, param).then(res => {
                    let num = 0;
                    // res.data.goods_list.forEach(item => {
                    //     num += parseFloat(item.total_price)
                    // });
                    // console.log(res.data)
                    this.actually = res.data.order_pay_price;

                    this.tableData = res.data.goods_list;

                    for (let i = 0; i < this.tableData.length; i++) {
                        console.log(this.tableData[i].trade_type_name)
                        if (this.tableData[i].trade_type_name == '保税') {
                            this.commodityType = false;
                        }
                        if (this.tableData[i].goods_sku.goods_attr_info.length == 3) {
                            this.tableData[i].goods_sku.threeWidth = 100
                        }
                        if (this.tableData[i].goods_sku.goods_attr_info.length <= 2) {
                            this.tableData[i].goods_sku.threeWidth = 150
                        }
                        if (this.tableData[i].goods_sku.goods_attr_info.length == 4) {
                            this.tableData[i].goods_sku.threeWidth = 80
                        }
                        if (this.tableData[i].goods_sku.goods_attr_info.length == 5) {
                            this.tableData[i].goods_sku.threeWidth = 60
                        }
                    }
                })
                this.loadingt = false;
            },
            getAddressList() {
                this.$HttpGet("/index.php?s=/admin/home.address/getcachetree").then(res => {
                    if (res.code == 0) {
                        this.options = res.data;
                    }

                })
            },
            getaddRess() {
                this.$HttpGet("/index.php?s=/admin/home.address/lists", {
                    search: this.search
                }).then(res => {
                    if (res.code != 0) {
                        return false
                    }
                    var arr = [''];
                    var addr = res.data.list.data;
                    var bz = true;
                    for (let i = 0; i < addr.length; i++) {
                        if (addr[i].is_status == 1) {
                            arr[0] = addr[i];
                            this.radio = addr[i].address_id;
                            bz = false;
                        } else {
                            arr.push(addr[i]);
                        }
                    }
                    if (bz) {
                        arr.splice(0, 1)
                    }
                    this.addRess = arr;

                    if (this.radio == "" && this.addRess.length != 0) {
                        this.radio = this.addRess[0].address_id
                    }
                    this.getList();

                })
            },
            setAddress(id) {
                this.$HttpGet("/index.php?s=/admin/home.address/setDefault", {
                    address_id: id
                }).then(res => {
                    this.$notifySuccess(res.msg);
                    this.getaddRess();
                })
            },
            modifyAddress(id) {
                this.id = id;
                this.$HttpGet("/index.php?address_id=7&s=/admin/home.address/detail", {
                    address_id: id
                }).then(res => {
                    for (var i = 0; i < this.options.length; i++) {

                        if (this.options[i].region_name == res.data.region[0]) {
                            this.cityOne = i;
                            this.cityIndex = i;
                        }
                    }
                    for (var i = 0; i < this.options[this.cityOne].children.length; i++) {
                        if (this.options[this.cityOne].children[i].region_name == res.data.region[1]) {
                            this.cityTwo = i;
                            this.ctiyChildrenIndex = i;

                        }
                    }
                    for (var i = 0; i < this.options[this.cityOne].children[this.cityTwo].children.length; i++) {
                        if (this.options[this.cityOne].children[this.cityTwo].children[i].region_name == res.data.region[2]) {
                            this.cityThree = i;
                        }
                    }
                    this.ruleForm = {
                        name: res.data.detail.name,
                        phone: res.data.detail.phone,
                        id_card_number: res.data.detail.id_card_number,
                        region: res.data.region,
                        detail: res.data.detail.detail,
                        status: res.data.detail.is_status == 1 ? true : false,
                        id_card_just: res.data.detail.id_card_just,
                        id_card_back: res.data.detail.id_card_back
                    };
                    this.backImg = res.data.detail.id_card_back;
                    this.positiveImg = res.data.detail.id_card_just;
                    this.dialogVisible = true;
                })
            },
            submitOrder() {
                if (this.radio == '') {
                    this.$notifyError('请选择收货地址或添加收货地址');
                    return false;
                }

                this.centerDialogVisible = true;
                let url = "";
                let param = {};
                if (this.type == 1) {
                    url = `/index.php?s=/admin/home.order/buyNow&goods_id=${this.goods_id}&goods_num=${this.goods_num}&goods_sku_id=${this.goods_sku_id}`;
                    param = {
                        remark: this.remark,
                        pay_type: 30,
                        address_id: this.radio
                    }
                } else {
                    url = `/index.php?s=/admin/home.order/cart`;
                    param = {
                        remark: this.remark,
                        pay_type: 30,
                        cart_ids: this.cart_ids,
                        address_id: this.radio
                    }
                }

                this.$HttpPost(url, param).then(res => {
                    if (res.code == -1) {
                        return false
                    }
                    if (res.code == 1) {
                        this.centerDialogVisible = false;
                    }
                    if (res.code == 0) {
                        this.orderID = res.data.order_id;
                        this.$HttpGet("/index.php?s=/admin/home.order/pay_source", {
                            order_no: res.data.order_no
                        }).then(res => {
                            if (res.code != 0) {
                                this.$notifyError('请求错误');
                                setTimeout(() => {
                                    window.history.back();
                                }, 1500)
                                return false
                            }

                            if (res.data.status_pay) {
                                // this.$router.push({path: `/index/play?order_id=${res.data.order_id}`});
                                //code:0 直接支付
                                if (res.data.source_info.code == 0) {
                                    this.isShow = 3;
                                    this.nowPlay(20);
                                } else if (res.data.source_info.code == -1) {
                                    this.centerDialogVisible = false;
                                    this.$router.push({path: `/index/orderCheck?order_id=${res.data.order_id}`});
                                } else {
                                    this.isShow = 2;
                                    this.infomation = res.data.source_info.msg;
                                    setTimeout(() => {
                                        this.centerDialogVisible = false
                                    }, 5000);
                                }

                            } else {
                                this.centerDialogVisible = false;
                                if (res.data.source_info) {
                                    this.$notifyError('订单校验失败，' + res.data.source_info.msg);
                                } else {
                                    this.$notifyError('订单校验失败，请重新选择商品');
                                }

                                setTimeout(() => {
                                    window.history.back();
                                }, 1500)
                                // this.$router.push({path: `/index/orderCheck?order_id=${res.data.order_id}`});
                            }
                            this.$HttpGet("/index.php?s=/admin/home.cart/lists").then(res => {
                                this.$store.commit('CARNUM', res.data.goods_list.length)

                            })
                        })
                        // this.$router.push({path: `/index/verify?order_no=${res.data.order_no}`});
                    } else {
                        this.$notifyError('请求错误');
                        setTimeout(() => {
                            window.history.back();
                        }, 1500)

                    }

                })
            }
        },
    };
</script>

<style lang="scss" scoped>
  .hm {
    display: none;
    color: #1770cb;
  }

  .cnm {
    margin-left: 20px;

    .phone {
      margin-left: 15px;
    }

    .mrAddres {
      margin-right: 20px;
    }

    .mrAddres:hover {
      color: red;
    }

    .upAddres:hover {
      color: red;
    }
  }

  .ra_bg {
    background: rgba($color: #385cc8, $alpha: 0.05);
  }

  .ra_img {
    position: absolute;
    width: 36px;
    height: 36px;
    right: 35px;
    background-image: url("../../assets/img/index/morendizhi.png");
  }

  .radios {
    padding-left: 5px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .addre {
      width: 46.5%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .radios:hover {
    background: rgba($color: #385cc8, $alpha: 0.05);

    .hm {
      display: block;
    }
  }

  .adAddres {
    margin-top: 20px;
    margin-bottom: 30px;
    width: 90px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    background: #385cc8;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
  }

  .adAddres:hover {
    background: rgba(#385cc8, 0.8);
  }

  .info_ts {
    margin-top: 20px;

    span {
      color: red;
    }
  }

  .info_sp {
    width: 980px;
    /*height: 170px;*/
    margin-top: 20px;

    .info_top {
      width: 965px;
      height: 40px;
      background: rgba($color: #385cc8, $alpha: 0.1);
      padding-left: 15px;
      display: flex;

      div {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 40px;
      }
    }

    .info_top_one {
      width: 100px;
      margin-top: 12px !important;
      margin-left: 38px;
      margin-right: 20px;
      text-align: center;

      img {
        width: 70px;
        height: 70px;
        object-fit: cover;

      }
    }

    .info_top_two {
      width: 210px;
      height: 100%;

      p {
        margin-bottom: 10px;
      }
    }

    .info_top_three,
    .info_top_five {
      width: 150px;
      height: 100%;
      margin-left: 10px;
    }

    .info_top_four {
      width: 154px;
      height: 100%;
    }

    .info_centent {
      padding-left: 15px;
      width: 963px;
      display: flex;
      background: #ffffff;
      border-left: 1px solid #eeeeee;
      border-right: 1px solid #eeeeee;

      div {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        display: flex;
        margin-top: 10px;
        flex-direction: column;
        align-content: space-around;
        padding-bottom: 10px;
      }
    }

    .info_bottom {
      width: 965px;
      height: 50px;
      padding-left: 15px;
      // line-height: 50px;
      background: rgba($color: #385cc8, $alpha: 0.05);
      display: flex;
      justify-content: space-between;
      align-content: center;
      align-items: center;

      input {
        width: 550px;
        height: 30px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 5px;
        padding-left: 10px;
      }

      input:focus {
        border: 1px solid #666666;
      }

      .bottom_rig {
        width: 250px;

        .bottom_ri {
          display: flex;

          .bottom_title {
            width: 100px;
            text-align: right;
          }

          .bottom_price {
            width: 150px;
            text-align: right;
            padding-right: 15px;
          }
        }
      }
    }
  }

  .hh {
    position: relative;
    width: 980px;
    height: 120px;
    margin-top: 20px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: flex-end;

    .hh_right {
      position: relative;
      width: 250px;
      padding-top: 25px;

      .hh_top {
        display: flex;

        .hh_title {
          width: 100px;
          text-align: right;
        }

        .hh_price {
          width: 150px;
          text-align: right;
          padding-right: 15px;
          font-size: 20px;
          color: red;
        }
      }

      .hh_buttom {
        position: relative;
        width: 130px;
        height: 44px;
        background: #e93030;
        border-radius: 22px;
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        left: 110px;
        margin-top: 20px;
        cursor: pointer;
      }

      .hh_buttom:hover {
        background: rgba(#e93030, 0.8);
      }
    }
  }

  .balance {
    margin: 0 auto;
  }

  .balance_nav {
    position: relative;
    width: 100%;
    min-width: 1020px;
    height: 90px;
    background-color: #ffffff;
    margin: 0 auto;
    display: flex;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.08);

    .nav {
      position: relative;
      width: 1020px;
      height: 100%;
      margin: 0 auto;
      padding-top: 16px;
      display: flex;

      .cneter {
        position: relative;
        width: 80%;
        left: 10%;
      }

      .line {
        width: 17%;
        height: 1px;
        margin-top: 11px;
      }

      .line_left {
        position: absolute;
        border-top: 2px solid rgba($color: #409eff, $alpha: 1);
      }

      .line_right {
        position: absolute;
        right: 0;
        border-top: 2px solid rgba($color: #c0c4cc, $alpha: 1);
      }
    }
  }

  .chang_line {
    position: absolute;
    right: 0;
    border-top: 2px solid rgba($color: #409eff, $alpha: 1);
  }

  .balance_main {
    position: relative;
    width: 1020px;
    // height: 1500px;
    background-color: #ffffff;
    margin: 0 auto;
    top: 6px;
    padding: 25px 0 50px 20px;

    .addre_name {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 1000;
      color: #000000;
    }

    .balance_search {
      position: relative;
      width: 370px;
      margin-top: 20px;
    }
  }

  .radios {
    width: 980px;
    min-height: 40px;
    line-height: 40px;
    display: flex;
  }

  .city_input {
    float: left;
    width: 31%;
    margin-right: 15px;
  }

  .el-cascader {
    width: 100%;
  }

  .tswz {
    position: absolute;
    top: 220px;
    text-align: center;
    width: 100%;
    margin-left: -25px;
    color: #409EFF;
  }

  .errone {
    width: 50%;
    margin: 0 auto;
    height: 200px;
    padding-top: 40px;
  }

  .nowPlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .ddje {

      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #E93030;
    }

    .plasePay {
      span {
        font-size: 24px;
        color: #E93030;
        /*&:first-child{*/
        /*  font-size: 16px;*/
        /*  color: #E93030;*/
        /*}*/
      }
    }

    .zfcg {
      color: #E93030;
      font-size: 26px;
      font-weight: bold;
    }

    .qsd {
      font-size: 14px;
      color: #333333;

    }

    .qrCode {
      width: 150px;
      height: 150px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .clonse {
      width: 16px;
      height: 16px;

      position: absolute;
      top: -76px;
      right: -10px;
      cursor: pointer;
      background: url("../../assets/img/del.png") no-repeat;

    }

    .line {
      width: 80%;
      height: 1px;
      border-top: dashed #ACC0D8 1px;

    }

    div {
      margin-bottom: 20px;
    }
  }

  .avatar {
    width: 195px;
    height: auto;
    display: block;
  }

  /deep/ .el-dialog {
    min-width: 550px;
    border-radius: 20px;

    .pay {
      position: relative;
      width: 220px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      top: -27px;

      div {
        &:first-child:hover {
          color: #2CCE30;
        }

        &:last-child:hover {
          color: #3958ac;
        }

        img {
          width: 25px;
          height: 22px;
          margin-top: -5px;
        }

        span {
          margin-left: 5px;
        }

        .wxzf {
          color: #09BB07;
        }

        .yezf {
          color: #3958AC;
        }
      }

      .feng {

        height: 20px;
        background: #333333;
        border-right: solid #333333 2px;

      }
    }
  }

  /deep/ .demo-ruleForm {

    .el-form-item {
      .addre {
        margin-right: 20px;
        margin-bottom: 10px;

        &:first-child {
          margin-left: 0px;
        }
      }

      .el-form-item__label:before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
      }
    }

    /deep/ .el-cascader {
      display: block;
    }
  }
</style>
<style lang="scss">
  .balance_search {
    .el-input__inner {
      border-top-left-radius: 16px !important;
      border-bottom-left-radius: 16px !important;
    }

    .el-input-group__append {
      border-top-right-radius: 16px !important;
      border-bottom-right-radius: 16px !important;
      color: #ffffff;
      background: #385cc8;
      border: 1px solid #385cc8;
    }
  }

  .shipping_address {
    margin-top: 20px;
    cursor: pointer;

    .el-radio {
      line-height: 40px;
      margin-right: 0px;
    }
  }

  .el-icon-loading {
    font-size: 60px;
  }

  .el-loading-spinner {
    margin-top: 0px;
  }
</style>
